<template>
    <div class="usage-record">
        <div class="zh-table">
            <div class="zh-table-open clear">
                <div class="zh-open-left fl">
                    <div class="open-width" style="width: 300px">
                        <el-date-picker
                            v-model="listParam.pickerTime"
                            type="daterange"
                            value-format="yyyy-MM-dd"
                            range-separator=" - "
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
					</div>
                    
                    <el-button type="primary" @click="searchFunc">检索</el-button>
                    <el-button type="primary" @click="resetList">重置</el-button>
                </div>
            </div>

            <div class="zh-table-contents" v-loading="loading.status" :element-loading-text="loading.txt">
                <div class="usage-list">
                    <div class="usage-list-item" v-for="(item, inx) in listData" :key="inx">
                        <p>{{item.create_time}}  -  {{item.status == 1 ? '' : item.return_day}}</p>
                        <p>
                            <span class="usage-left-title">使用人：</span>
                            <span>{{item.user_name}}</span>
                            <span class="usage-people" @click="getDetail">{{item.identifier}}</span>
                        </p>
                        <div class="usage-item-content">
                            <span class="usage-left-title">使用情况：</span>
                            <div class="usage-right-content">
                                <span>{{getDay(item.create_time, item.return_day)}}</span>
                                
                                <el-collapse v-if="item.break.length > 0">
                                    <el-collapse-item>
                                        <template slot="title">
                                            <img src="./../../../../static/image/affairs/vehicle/warning.png"><span class="collapse-slot-title">{{item.break.length}}条违章记录</span>
                                        </template>
                                        <div class="el-collapse-item-content-usage" v-for="(item1, inx1) in item.break" :key="inx1">
                                            <div class="list-item">
                                                <span class="item-title">罚单号：</span>
                                                <span>{{item1.number}}</span>
                                            </div>
                                            <div class="list-item">
                                                <span class="item-title">开单日期：</span>
                                                <span>{{item1.break_day}}</span>
                                            </div>
                                            <div class="list-item">
                                                <span class="item-title">违章原因：</span>
                                                <span>{{item1.comment}}</span>
                                            </div>
                                            <div class="list-item">
                                                <span class="item-title">违章位置：</span>
                                                <span>{{item1.position}}</span>
                                            </div>
                                            <div class="list-item">
                                                <span class="item-title">处罚机关：</span>
                                                <span>{{item1.department}}</span>
                                            </div>
                                            <div class="list-item">
                                                <span class="item-title">罚金金额：</span>
                                                <span>{{item1.money}}</span>
                                            </div>
                                            <div class="list-item">
                                                <span class="item-title">扣分：</span>
                                                <span>{{item1.score}}</span>
                                            </div>
                                            <div class="list-item">
                                                <span class="item-title">处罚截止日期：</span>
                                                <span>{{item1.break_end_day}}</span>
                                            </div>
                                            <div class="list-item" v-if="item1.image.length > 0">
                                                <span class="item-title">附件图片：</span>
                                                <div class="caroul-image">
                                                        <!-- <i class="el-icon-arrow-left" :class="arrowLeft ? '' : 'icon-no-allowed'" @click="chagneArrowLeft"></!-->
                                                        <!-- <span v-for="(item, inx) in getActiveImg" :key="inx"> -->
                                                        <span v-for="(item2, inx) in item1.image" :key="inx">
                                                            <img :src="BASE_URL + item2">
                                                            <span class="file-img-cover">
                                                                <i class="el-icon-zoom-in" @click="viewPicture(item2)"></i>
                                                            </span>
                                                        </span>
                                                        <!-- <i class="el-icon-arrow-right" :class="arrowRight ? '' : 'icon-no-allowed'" @click="chagneArrowRight"></!-->
                                                </div>
                                            </div>
                                            <div class="list-item">
                                                <span class="item-title">状态：</span>
                                                <span v-if="item1.is_solve === 1">已处理</span>
                                                <span v-else style="color: #CD3232">未处理</span>
                                            </div>
                                        </div>
                                    </el-collapse-item>
                                </el-collapse>
                                <div v-else class="damage-ok"><img src="./../../../../static/image/affairs/vehicle/ok.png">无违章情况</div>

                                <el-collapse v-if="item.damage.length > 0">
                                    <el-collapse-item>
                                        <template slot="title">
                                            <img src="./../../../../static/image/affairs/vehicle/warning.png"><span class="collapse-slot-title">{{item.damage.length}}条损坏记录</span>
                                        </template>
                                        <div class="el-collapse-item-content-usage" v-for="(item1, inx1) in item.damage" :key="inx1">
                                            <div class="list-item">
                                                <span class="item-title">损坏日期：</span>
                                                <span>{{item1.damage_day}}</span>
                                            </div>
                                            <div class="list-item">
                                                <span class="item-title">损坏状况：</span>
                                                <span>{{item1.comment}}</span>
                                            </div>
                                            <div class="list-item" v-if="item1.image.length > 0">
                                                <span class="item-title">附件图片：</span>
                                                <div class="caroul-image">
                                                        <!-- <i class="el-icon-arrow-left" :class="arrowLeft ? '' : 'icon-no-allowed'" @click="chagneArrowLeft"></!-->
                                                        <!-- <span v-for="(item, inx) in getActiveImg" :key="inx"> -->
                                                        <span v-for="(item2, inx) in item1.image" :key="inx">
                                                            <img :src="BASE_URL + item2">
                                                            <span class="file-img-cover">
                                                                <i class="el-icon-zoom-in" @click="viewPicture(item2)"></i>
                                                            </span>
                                                        </span>
                                                        <!-- <i class="el-icon-arrow-right" :class="arrowRight ? '' : 'icon-no-allowed'" @click="chagneArrowRight"></!-->
                                                </div>
                                            </div>
                                            <div class="list-item">
                                                <span class="item-title">状态：</span>
                                                <span v-if="item1.is_solve === 1">已处理</span>
                                                <span v-else style="color: #CD3232">未处理</span>
                                            </div>
                                        </div>
                                    </el-collapse-item>
                                </el-collapse>
                                <div v-else><img src="./../../../../static/image/affairs/vehicle/ok.png">无损坏情况</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="table-pagination" v-show="totalNumber > 10">
                    <el-pagination
                        @size-change="changeCurrentSize"
                        @current-change="changeCurrentPage"
                        :current-page="listParam.pageIndex"
                        :page-sizes="[10, 20, 30, 40, 50, 100]"
                        :page-size="listParam.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalNumber">
                    </el-pagination>
                </div>
            </div>
        </div>

        <image-viewer
            v-if="imagePreview.showViewer"
            :initial-index="imageIndex"
            :on-close="closeViewer"
            :url-list="imagePreview.previewSrcList">
        </image-viewer>
    </div>
</template>

<script>
export default {
    data() {
        return {
            imagePreview: {
                showViewer: false,
                previewSrcList: []
            },
            imgVisible: false, // 图片预览
            totalNumber: 0,
            activeIndex: 0, // 轮播图
             previewImgURL: null, // 图片预览
            listData: [],
            imgList: [],
            loading: {
                status: false, // 是否显示 loading
                txt: '获取数据...' // loading 标题
            },
            listParam: {
                pickerTime: [],
                pageSize: 10,
                pageIndex: 1
            }
        }
    },
    created() {
        this.getList();
    },
    computed: {
        imageIndex() {
            return this.imagePreview.previewSrcList.indexOf(this.previewImgURL);
        },
        getDay() {
            return (day1, day2) => {
                let day = parseInt((new Date(day2).getTime() / 1000 - parseInt(new Date(day1).getTime() / 1000)) / 86400);
                
                if (day == 0) {
                    day = parseInt((new Date(day2).getTime() / 1000 - parseInt(new Date(day1).getTime() / 1000)) / 3600);

                    return day + ' 小时';
                } else {
                    return day + ' 天';
                }
            }
        },
        /**
         * 是否显示左箭头
         */
        arrowLeft() {
            return this.imgList.length > 5 && this.activeIndex > 0;
        },
        /**
         * 是否显示右箭头
         */
        arrowRight() {
             return this.imgList.length > 5 && this.activeIndex < Math.floor(this.imgList.length/5);
        },
        /**
         * 获取当前播放的图片
         */
        getActiveImg() {
            return this.imgList.filter((item, inx) => {
                return (inx < 5 * this.activeIndex + 5) && (inx >= 5 * this.activeIndex)
            })
        }
    },
    methods: {
        /**
         * 获取使用记录
         */
        getList() {
            this.loading.status = true;

            let success = (res=>{
                this.loading.status = false;
                this.listData = res.data.data;
                this.totalNumber = res.data.data_sum;
            })
            let params = {
                car_id: this.$route.params.id,
                start_date: this.listParam.pickerTime[0],
                end_date: this.listParam.pickerTime[1],
                page_index: this.listParam.pageIndex,
                page_size: this.listParam.pageSize,
            }

            this.$ajax.get('api/car/uselists', {params, func:{success: success}})
        },
        /**
         * 搜索列表
         */
        searchFunc() {
            this.listParam.pageIndex = 1;
            this.getList();
        },
        /**
         * 重置数据
         */
        resetList() {
            this.listParam = {
                pickerTime: [],
                pageSize: 10,
                pageIndex: 1
            }
            this.getList();
        },
        /**
         * 审批详情
         */
        getDetail() {

        },
        /**
         * 查看大图
         * 当前页图片下标
         */
        viewPicture(item) {
            // let index = inx + this.activeIndex * 5;
            this.previewImgURL = this.BASE_URL + item;
        
            this.imagePreview.showViewer = true;
            this.imagePreview.previewSrcList = [this.BASE_URL + item];
        },
        closeViewer() {
            this.imagePreview.showViewer = false;
        },
        /**
         * 向左翻页
         */
        chagneArrowLeft() {
            this.activeIndex > 0 && this.activeIndex--;
        },
        /**
         * 向右翻页
         */
        chagneArrowRight() {
            this.activeIndex + 1 < Math.floor(this.imgList.length/5) && this.activeIndex++
        },
        /**
         * 设置每页中显示的数据数量
         * @param {Number} val 每页数据条数
         */
        changeCurrentSize(val) {
            this.listParam.pageIndex = 1;
            this.listParam.pageSize = val;

            this.getList();
        },
        /**
         * 切换到第几页数据
         * @param {Number} val 页数
         */
        changeCurrentPage(val) {
            this.listParam.pageIndex = val;

            this.getList();
        },
    },
}
</script>

<style lang="scss">
.usage-record {
    .usage-list {
        margin: 35px auto;

        p {
            margin: 20px auto;
        }

        .usage-left-title {
            display: inline-block;
            width: 120px;
            color: #666;
        }

        .usage-list-item {
            padding: 0 0 20px;
            border-bottom: 1px solid #EFEFEF;

            .usage-people{
                color: #348EFC;
                cursor: pointer;
            }

            .usage-item-content {
                display: flex;

                .usage-right-content {
                    flex: 1;
                    width: 0;

                    >span {
                        display: inline-block;
                        margin-bottom: 20px;
                    }

                    img {
                        margin-right: 20px;
                    }

                    .damage-ok {
                        margin-bottom: 18px;
                    }

                    .el-collapse {
                        border-top: none;
                        border-bottom: none;

                        .collapse-slot-title {
                            color: #CD3232;
                        }

                        .el-collapse-item__header {
                            width: 155px;
                            border-bottom: none;
                        }

                        .el-collapse-item__wrap {
                            border-bottom: none;
                        }

                        .el-collapse-item__content{
                            margin-bottom: 10px;
                            padding: 22px;
                            width: 850px;
                            font-size: 14px;
                            background: #FFFDF8;
                            border: 1px solid #F8EEE0;

                            .el-collapse-item-content-usage {
                                .list-item {
                                    display: flex;
                                    margin-bottom: 10px;

                                    .item-title {
                                        width: 120px;
                                        color: #666;
                                    }
                                    
                                    >span:last-child {
                                        flex: 1;
                                        width: 0;
                                        color: #000;
                                    }
                                }

                                .item-color {
                                    color: #BE4747;
                                }

                                .caroul-image {
                                    position: relative;
                                    display: flex;
                                    align-items: center;
                                    margin-left: 20px;
                                    width: 100%;
                                    height: 120px;

                                    img {
                                        width: 120px;
                                        height: 100%;
                                        object-fit: cover
                                    }

                                    >span {
                                        position: relative;
                                        height: 100%;
                                        width: 120px;
                                    }

                                    >span:nth-child(2) {
                                        margin-left: 10px;
                                    }

                                    >span:nth-child(3) {
                                        margin: auto 10px;
                                    }

                                    >i {
                                        position: absolute;
                                        padding: 1px;
                                        font-size: 30px;
                                        cursor: pointer;
                                    }

                                    >i:hover {
                                        color: #fff;
                                        background: rgba(0, 0, 0, 0.3);
                                        border-radius: 50%;
                                    }

                                    .el-icon-arrow-left {
                                        left: -20px;
                                    }

                                    .el-icon-arrow-right {
                                        right: -20px;
                                    }

                                    .icon-no-allowed {
                                        cursor: not-allowed;
                                    }

                                    .file-img-cover {
                                        display: none;

                                        >i {
                                            margin-top: 45px;
                                            color: #fff;
                                            font-size: 45px;
                                            cursor: pointer;
                                        }
                                    }

                                    >span:hover .file-img-cover {
                                        display: block;
                                        position: absolute;
                                        left: 0;
                                        top: 0;
                                        width: 100%;
                                        height: 100%;
                                        background: rgba(0, 0, 0, 0.5);
                                        text-align: center;
                                    }
                                }
                            }

                            .el-collapse-item-content-usage:not(:first-child) {
                                margin-top: 20px;
                            }

                            .el-collapse-item-content-usage:not(:first-child):before {
                                content: '';
                                width: 100%;
                                height: 1px;
                                background: #ccc;
                                display: block;
                                margin-bottom: 20px;
                            }
                        }
                    }
                }
            }
        }

        .usage-list-item:first-child {
            border-top: 1px solid #EFEFEF;
        }
    }

    .open-width {
        .el-date-editor {
            width: 100%;
            vertical-align: middle;
        }
    }
}
</style>